<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../resources/css/calling/pages/header.css" />
    <link rel="stylesheet" href="../resources/css/calling/pages/ywybljh.css" />
    <title>业务员办理叫号</title>
    <style>
        /* 树形下拉组件样式 */
        .tree-select {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .tree-select-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 3px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            background: #fff;
            cursor: pointer;
            min-height: 32px;
            transition: all 0.3s;
        }

        .tree-select-trigger:hover {
            border-color: #40a9ff;
        }

        .tree-select-trigger.active {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }

        .tree-select-placeholder {
            color: #bfbfbf;
        }

        .tree-select-value {
            color: #262626;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tree-select-arrow {
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid #bfbfbf;
            transition: transform 0.3s;
            margin-left: 8px;
        }

        .tree-select-trigger.active .tree-select-arrow {
            transform: rotate(180deg);
        }

        .tree-select-dropdown {
            position: fixed;
            background: #fff;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            z-index: 9999;
            max-height: 256px;
            overflow: hidden;
            display: none;
        }

        .tree-select-dropdown.show {
            display: block;
        }

        .tree-select-search {
            padding: 8px;
            border-bottom: 1px solid #f0f0f0;
        }

        .tree-select-search input {
            width: 100%;
            padding: 4px 8px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            outline: none;
            font-size: 14px;
        }

        .tree-select-search input:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }

        .tree-select-options {
            max-height: 200px;
            overflow-y: auto;
        }

        .tree-select-option {
            padding: 8px 12px;
            cursor: pointer;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
        }

        .tree-select-option:hover {
            background-color: #f5f5f5;
        }

        .tree-select-option.selected {
            background-color: #e6f7ff;
            color: #1890ff;
        }

        .tree-select-option.disabled {
            color: #bfbfbf;
            cursor: not-allowed;
            background-color: #fafafa;
        }

        .tree-select-option.disabled:hover {
            background-color: #fafafa;
        }

        .tree-select-option-indent {
            width: 20px;
            flex-shrink: 0;
        }

        .tree-select-option-content {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tree-select-option-level-0 {
            font-weight: 600;
            color: #262626;
        }

        .tree-select-option-level-1 {
            color: #595959;
        }

        .tree-select-empty {
            padding: 16px;
            text-align: center;
            color: #bfbfbf;
        }
    </style>
</head>

<body>
    <main class="container" style="padding-top: 40px;">
        <main class="w_1240">
            <section class="main_header">
                <main style="flex: 1; padding-right: 20px;">
                    <div class="main_header_info">
                        <div class="main_header_info_pic">
                            <img src="../resources/images/test_001.jpg" width="100" height="128" />
                        </div>
                        <div>
                            <ul class="main_header_info_text">
                                <li>
                                    <span style="font-size: 20px;">张琪宇</span>
                                    <div class="main_header_info_dropdown">
                                        <div class="main_header_info_type">
                                            在线
                                        </div>
                                        <em class="main_header_info_down"></em>
                                        <ul class="main_header_info_dropdown_list">
                                            <li data-value="online">在线</li>
                                            <li data-value="busy">忙碌</li>
                                            <li data-value="offline">离线</li>
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <div class="main_header_info_dropdown">
                                        <span>校区：中关村校区</span>
                                        <em class="main_header_info_down"></em>
                                        <ul class="main_header_info_dropdown_list">
                                            <li>校区：中关村校区</li>
                                            <li>校区：海淀校区</li>
                                            <li>校区：朝阳校区</li>
                                            <li>校区：丰台校区</li>
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <div class="main_header_info_dropdown">
                                        <span>窗口：综合服务窗口4号</span>
                                        <em class="main_header_info_down"></em>
                                        <ul class="main_header_info_dropdown_list">
                                            <li data-value="window1">窗口：综合服务窗口1号</li>
                                            <li data-value="window2">窗口：综合服务窗口2号</li>
                                            <li data-value="window3">窗口：综合服务窗口3号</li>
                                            <li data-value="window4">窗口：综合服务窗口4号</li>
                                            <li data-value="window5">窗口：综合服务窗口5号</li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <ul class="main_header_card">
                            <li>
                                <header>当前办理人</header>
                                <main style="color: #1677FF">Y001 黄志强</main>
                            </li>
                            <li>
                                <header>等待办理人</header>
                                <main style="color: #5424E6">Y002 王美丽</main>
                            </li>
                        </ul>
                    </div>
                    <div class="main_header_tab">
                        <ul class="main_header_tab_header">
                            <li class="active">等待中 43</li>
                            <li>过号 5</li>
                            <li>完成 6</li>
                            <li>办结 8</li>
                        </ul>
                        <div class="table-container" style="height: 214px; overflow-x: hidden;">
                            <table class="main_header_tab_table">
                                <colgroup>
                                    <col style="width: 96px;" />
                                    <col style="width: 102px;" />
                                    <col style="width: 135px; " />
                                    <col style="width: 204px;" />
                                    <col style="width: 140px;" />
                                    <col style="width: auto;" />
                                </colgroup>
                                <tr style="position: sticky; top: 0px; background: #fff;">
                                    <th>预约号码</th>
                                    <th>姓名</th>
                                    <th>部门</th>
                                    <th>预约时间</th>
                                    <th>报到时间</th>
                                    <th>预约业务</th>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="line1">Y002</div>
                                    </td>
                                    <td>
                                        <div class="line1">王美丽</div>
                                    </td>
                                    <td>
                                        <div class="line1">信息中心</div>
                                    </td>
                                    <td>
                                        <div class="line1">2025.04.16 8:00-9:00</div>
                                    </td>
                                    <td>
                                        <div class="line1">04-16 08:30</div>
                                    </td>
                                    <td>
                                        <div class="line1">印信服务</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="line1">Y002</div>
                                    </td>
                                    <td>
                                        <div class="line1">王美丽</div>
                                    </td>
                                    <td>
                                        <div class="line1">信息中心</div>
                                    </td>
                                    <td>
                                        <div class="line1">2025.04.16 8:00-9:00</div>
                                    </td>
                                    <td>
                                        <div class="line1">04-16 08:30</div>
                                    </td>
                                    <td>
                                        <div class="line1">印信服务</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="line1">Y002</div>
                                    </td>
                                    <td>
                                        <div class="line1">王美丽</div>
                                    </td>
                                    <td>
                                        <div class="line1">信息中心</div>
                                    </td>
                                    <td>
                                        <div class="line1">2025.04.16 8:00-9:00</div>
                                    </td>
                                    <td>
                                        <div class="line1">04-16 08:30</div>
                                    </td>
                                    <td>
                                        <div class="line1">印信服务</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="line1">Y002</div>
                                    </td>
                                    <td>
                                        <div class="line1">王美丽</div>
                                    </td>
                                    <td>
                                        <div class="line1">信息中心</div>
                                    </td>
                                    <td>
                                        <div class="line1">2025.04.16 8:00-9:00</div>
                                    </td>
                                    <td>
                                        <div class="line1">04-16 08:30</div>
                                    </td>
                                    <td>
                                        <div class="line1">印信服务</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="line1">Y002</div>
                                    </td>
                                    <td>
                                        <div class="line1">王美丽</div>
                                    </td>
                                    <td>
                                        <div class="line1">信息中心</div>
                                    </td>
                                    <td>
                                        <div class="line1">2025.04.16 8:00-9:00</div>
                                    </td>
                                    <td>
                                        <div class="line1">04-16 08:30</div>
                                    </td>
                                    <td>
                                        <div class="line1">印信服务</div>
                                    </td>
                                </tr>
                                 <tr>
                                    <td>
                                        <div class="line1">Y002</div>
                                    </td>
                                    <td>
                                        <div class="line1">王美丽</div>
                                    </td>
                                    <td>
                                        <div class="line1">信息中心</div>
                                    </td>
                                    <td>
                                        <div class="line1">2025.04.16 8:00-9:00</div>
                                    </td>
                                    <td>
                                        <div class="line1">04-16 08:30</div>
                                    </td>
                                    <td>
                                        <div class="line1">印信服务</div>
                                    </td>
                                </tr>
                                 <tr>
                                    <td>
                                        <div class="line1">Y002</div>
                                    </td>
                                    <td>
                                        <div class="line1">王美丽</div>
                                    </td>
                                    <td>
                                        <div class="line1">信息中心</div>
                                    </td>
                                    <td>
                                        <div class="line1">2025.04.16 8:00-9:00</div>
                                    </td>
                                    <td>
                                        <div class="line1">04-16 08:30</div>
                                    </td>
                                    <td>
                                        <div class="line1">印信服务</div>
                                    </td>
                                </tr>
                                 <tr>
                                    <td>
                                        <div class="line1">Y002</div>
                                    </td>
                                    <td>
                                        <div class="line1">王美丽</div>
                                    </td>
                                    <td>
                                        <div class="line1">信息中心</div>
                                    </td>
                                    <td>
                                        <div class="line1">2025.04.16 8:00-9:00</div>
                                    </td>
                                    <td>
                                        <div class="line1">04-16 08:30</div>
                                    </td>
                                    <td>
                                        <div class="line1">印信服务</div>
                                    </td>
                                </tr>
                                 <tr>
                                    <td>
                                        <div class="line1">Y002</div>
                                    </td>
                                    <td>
                                        <div class="line1">王美丽</div>
                                    </td>
                                    <td>
                                        <div class="line1">信息中心</div>
                                    </td>
                                    <td>
                                        <div class="line1">2025.04.16 8:00-9:00</div>
                                    </td>
                                    <td>
                                        <div class="line1">04-16 08:30</div>
                                    </td>
                                    <td>
                                        <div class="line1">印信服务</div>
                                    </td>
                                </tr>
                            </table>
                        </div>

                    </div>
                </main>
                <main>
                    <ul class="quick_access">
                        <li>
                            <a href="" style="background: #f5962d;">
                                <img src="../resources/images/jh_001.png" width="56" height="56" />
                                <span style="color: #fff;">下一位</span>
                            </a>
                        </li>
                        <li>
                            <a href="" style="background: #dfd7f2;">
                                <img src="../resources/images/jh_002.png" width="56" height="56" />
                                <span>重复呼叫</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" style="background: #cddfff;"
                                onclick="openBusinessDialog('完成')">
                                <img src="../resources/images/jh_003.png" width="56" height="56" />
                                <span>完成</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" style="background: #ceefe8;"
                                onclick="openBusinessDialog('办结')">
                                <img src="../resources/images/jh_004.png" width="56" height="56" />
                                <span>办结</span>
                            </a>
                        </li>
                    </ul>
                </main>
            </section>
            <section class="main_list">
                <header class="main_list_header">
                    <div class="main_list_header_s">
                        <input placeholder="请输入姓名" style="margin-left: 0;" type="text" />
                        <input placeholder="请输入咨询内容" type="text" />
                        <button type="button" class="btn btn_type_1 ml_15">查询</button>
                    </div>
                    <div class="main_list_header_b">
                        <button type="button" class="btn btn_type_2">新建咨询</button>
                        <button type="button" class="btn btn_type_3 ml_15">数据导出</button>
                    </div>
                </header>
                <div class="main_list_table_box">
                    <div style="min-height: 327px;">
                        <table class="main_list_table">
                            <colgroup>
                                <col style="width: 55px;" />
                                <col style="width: 74px;" />
                                <col style="width: 100px;" />
                                <col style="width: 420px;" />
                                <col style="width: 90px;" />
                                <col style="width: 150px;" />
                                <col style="width: 120px;" />
                                <col style="width: 110px;" />
                                <col style="width: auto;" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th class="main_list_table_checkbox">
                                        <input type="checkbox" />
                                    </th>
                                    <th>姓名</th>
                                    <th>所在部门</th>
                                    <th>咨询内容</th>
                                    <th>业务分类</th>
                                    <th>咨询时间</th>
                                    <th>联系方式</th>
                                    <th>咨询类别</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <div class="pager" id="pager">
                        <!-- 分页内容将通过JavaScript动态生成 -->
                    </div>
                </div>
            </section>
        </main>
    </main>

    <!-- 弹窗组件 -->
    <div class="dialog-overlay" id="businessDialog">
        <div class="dialog">
            <div class="dialog-header">
                <h3 class="dialog-title">办理业务登记</h3>
                <button class="dialog-close" onclick="closeDialog()">&times;</button>
            </div>
            <div class="dialog-body">
                <table class="dialog-table" id="businessTable">
                    <thead>
                        <tr>
                            <th style="width: 45%;">办理业务</th>
                            <th style="width: 30%;">实际办理量</th>
                            <th style="width: 15%;">操作</th>
                        </tr>
                    </thead>
                    <tbody id="businessTableBody">
                        <!-- 动态添加的行将在这里 -->
                    </tbody>
                </table>
                <div class="empty-state" id="emptyState" style="display: none;">
                    暂无数据，请点击下方按钮添加业务
                </div>
                <button class="add-row-btn" onclick="addTableRow()">+ 新增业务</button>
            </div>
            <div class="dialog-footer">
                <button class="dialog-btn" onclick="cancelDialog()">取消</button>
                <button class="dialog-btn primary" onclick="confirmDialog()">确定</button>
            </div>
        </div>
    </div>

    <script>
        // 模拟数据
        var mockData = [
            { id: 1, name: '王琴', department: '科研处', content: '建议优化线下大厅预约叫号机制，有很多不合理地方，需要改进', category: '人事', time: '2025年4月15日 8:30', phone: '13899883747', type: '艾比特' },
            { id: 2, name: '李明', department: '教务处', content: '关于学生成绩查询系统的优化建议', category: '教务', time: '2025年4月15日 9:15', phone: '13788776655', type: '在线咨询' },
            { id: 3, name: '张华', department: '财务处', content: '学费缴费流程需要简化，希望能够提供更便捷的支付方式', category: '财务', time: '2025年4月15日 10:00', phone: '13677665544', type: '现场咨询' },
            { id: 4, name: '刘芳', department: '学工处', content: '学生宿舍管理制度咨询', category: '学工', time: '2025年4月15日 11:30', phone: '13566554433', type: '电话咨询' },
            { id: 5, name: '陈强', department: '图书馆', content: '图书借阅系统升级后的使用问题', category: '图书', time: '2025年4月15日 14:20', phone: '13455443322', type: '艾比特' },
            { id: 6, name: '赵敏', department: '信息中心', content: '校园网络连接不稳定问题反馈', category: '技术', time: '2025年4月15日 15:45', phone: '13344332211', type: '在线咨询' },
            { id: 7, name: '孙丽', department: '人事处', content: '教职工考勤制度相关咨询', category: '人事', time: '2025年4月16日 8:00', phone: '13233221100', type: '现场咨询' },
            { id: 8, name: '周杰', department: '后勤处', content: '食堂服务质量改进建议', category: '后勤', time: '2025年4月16日 9:30', phone: '13122110099', type: '电话咨询' },
            { id: 9, name: '吴娟', department: '招生办', content: '招生政策解读和咨询', category: '招生', time: '2025年4月16日 10:15', phone: '13011009988', type: '艾比特' },
            { id: 10, name: '郑伟', department: '保卫处', content: '校园安全管理制度咨询', category: '安全', time: '2025年4月16日 11:00', phone: '12900998877', type: '在线咨询' },
            { id: 11, name: '马超', department: '科研处', content: '科研项目申报流程咨询', category: '科研', time: '2025年4月16日 13:30', phone: '12899887766', type: '现场咨询' },
            { id: 12, name: '黄丽丽', department: '教务处', content: '课程安排调整申请', category: '教务', time: '2025年4月16日 14:45', phone: '12788776655', type: '电话咨询' },
            { id: 13, name: '林峰', department: '财务处', content: '科研经费使用规范咨询', category: '财务', time: '2025年4月16日 16:20', phone: '12677665544', type: '艾比特' },
            { id: 14, name: '何静', department: '学工处', content: '学生奖学金评定标准咨询', category: '学工', time: '2025年4月17日 8:30', phone: '12566554433', type: '在线咨询' },
            { id: 15, name: '罗军', department: '图书馆', content: '电子资源访问权限问题', category: '图书', time: '2025年4月17日 9:45', phone: '12455443322', type: '现场咨询' }
        ];

        // 全局变量
        var currentPage = 1;
        var pageSize = 6;
        var totalData = mockData.slice();
        var filteredData = mockData.slice();

        // 初始化页面
        function init() {
            // 先渲染表格，再绑定事件
            renderTable();
            bindEvents();
        }

        // 绑定事件
        function bindEvents() {
            // 全选checkbox事件
            var headerCheckbox = document.querySelector('.main_list_table th input[type="checkbox"]');
            if (headerCheckbox) {
                headerCheckbox.addEventListener('change', function () {
                    var isChecked = this.checked;
                    var rowCheckboxes = document.querySelectorAll('.main_list_table tbody input[type="checkbox"]');
                    for (var i = 0; i < rowCheckboxes.length; i++) {
                        rowCheckboxes[i].checked = isChecked;
                    }
                });
            }

            // 下拉列表事件
            var dropdowns = document.querySelectorAll('.main_header_info_dropdown');
            for (var i = 0; i < dropdowns.length; i++) {
                var dropdown = dropdowns[i];
                var downArrow = dropdown.querySelector('.main_header_info_down');
                var dropdownList = dropdown.querySelector('.main_header_info_dropdown_list');

                // 点击整个下拉区域切换下拉列表显示
                dropdown.addEventListener('click', function (e) {
                    e.stopPropagation();
                    var currentDropdown = this;
                    var currentList = currentDropdown.querySelector('.main_header_info_dropdown_list');

                    // 关闭其他下拉列表并移除active状态
                    var allDropdowns = document.querySelectorAll('.main_header_info_dropdown');
                    var allLists = document.querySelectorAll('.main_header_info_dropdown_list');
                    for (var j = 0; j < allLists.length; j++) {
                        if (allLists[j] !== currentList) {
                            allLists[j].style.display = 'none';
                            allDropdowns[j].classList.remove('active');
                        }
                    }

                    // 切换当前下拉列表和active状态
                    if (currentList.style.display === 'block') {
                        currentList.style.display = 'none';
                        currentDropdown.classList.remove('active');
                    } else {
                        currentList.style.display = 'block';
                        currentDropdown.classList.add('active');
                    }
                });

                // 选择下拉项事件
                var listItems = dropdownList.querySelectorAll('li');
                for (var j = 0; j < listItems.length; j++) {
                    listItems[j].addEventListener('click', function (e) {
                        e.stopPropagation();
                        var selectedText = this.textContent;
                        var dropdown = this.closest('.main_header_info_dropdown');

                        // 更新显示文本
                        var statusElement = dropdown.querySelector('.main_header_info_type');
                        var spanElement = dropdown.querySelector('span');

                        if (statusElement) {
                            statusElement.textContent = selectedText;
                        } else if (spanElement) {
                            spanElement.textContent = selectedText;
                        }

                        // 移除同级所有选中状态
                        var siblingItems = this.parentNode.querySelectorAll('li');
                        for (var m = 0; m < siblingItems.length; m++) {
                            siblingItems[m].classList.remove('selected');
                        }

                        // 添加当前选中状态
                        this.classList.add('selected');

                        // 隐藏下拉列表并移除active状态
                        this.closest('.main_header_info_dropdown_list').style.display = 'none';
                        currentDropdown.classList.remove('active');
                    });
                }
            }

            // 点击其他地方关闭下拉列表
            document.addEventListener('click', function () {
                var allDropdowns = document.querySelectorAll('.main_header_info_dropdown');
                var allLists = document.querySelectorAll('.main_header_info_dropdown_list');
                for (var i = 0; i < allLists.length; i++) {
                    allLists[i].style.display = 'none';
                    allDropdowns[i].classList.remove('active');
                }
            });

            // 查询按钮事件
            var searchBtn = document.querySelector('.btn_type_1');
            searchBtn.addEventListener('click', function () {
                performSearch();
            });

            // 输入框回车事件
            var inputs = document.querySelectorAll('.main_list_header_s input');
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].addEventListener('keypress', function (e) {
                    if (e.key === 'Enter') {
                        performSearch();
                    }
                });
            }

            // 标签页切换事件
            var tabItems = document.querySelectorAll('.main_header_tab_header li');
            for (var j = 0; j < tabItems.length; j++) {
                tabItems[j].addEventListener('click', function () {
                    // 移除所有标签的active状态
                    var allTabs = document.querySelectorAll('.main_header_tab_header li');
                    for (var k = 0; k < allTabs.length; k++) {
                        allTabs[k].classList.remove('active');
                    }

                    // 为当前点击的标签添加active状态
                    this.classList.add('active');

                    // 触发标签切换回调（供后续业务逻辑使用）
                    if (typeof onTabChange === 'function') {
                        var tabText = this.textContent.trim();
                        var tabType = tabText.split(' ')[0]; // 获取标签类型（等待中、过号、完成、办结）
                        onTabChange(tabType, this);
                    }
                });
            }
        }

        // 执行搜索
        function performSearch() {
            var nameInput = document.querySelectorAll('.main_list_header_s input')[0].value.trim();
            var contentInput = document.querySelectorAll('.main_list_header_s input')[1].value.trim();

            filteredData = totalData.filter(function (item) {
                var nameMatch = !nameInput || item.name.indexOf(nameInput) !== -1;
                var contentMatch = !contentInput || item.content.indexOf(contentInput) !== -1;
                return nameMatch && contentMatch;
            });

            currentPage = 1;
            renderTable();
        }

        // 标签页切换回调函数（可选，供业务逻辑扩展使用）
        function onTabChange(tabType, tabElement) {
            console.log('标签页切换:', tabType);
            // 在这里添加具体的业务逻辑
            // tabType: '等待中', '过号', '完成', '办结'
            // tabElement: 当前点击的标签元素
        }

        // 渲染表格
        function renderTable() {
            var startIndex = (currentPage - 1) * pageSize;
            var endIndex = startIndex + pageSize;
            var currentData = filteredData.slice(startIndex, endIndex);

            var tbody = document.querySelector('.main_list_table tbody');

            var html = '';
            for (var i = 0; i < currentData.length; i++) {
                var item = currentData[i];
                html += '<tr>';
                html += '<td class="main_list_table_checkbox"><input type="checkbox"/></td>';
                html += '<td><div class="line1">' + item.name + '</div></td>';
                html += '<td><div class="line1">' + item.department + '</div></td>';
                html += '<td><div class="line1">' + (item.content.length > 30 ? item.content.substring(0, 30) + '…' : item.content) + '</div></td>';
                html += '<td><div class="line1">' + item.category + '</div></td>';
                html += '<td><div class="line1">' + item.time + '</div></td>';
                html += '<td><div class="line1">' + item.phone + '</div></td>';
                html += '<td><div class="line1">' + item.type + '</div></td>';
                html += '<td><a href="javascript:void(0)" onclick="deleteRow(' + item.id + ')">删除</a></td>';
                html += '</tr>';
            }

            tbody.innerHTML = html;

            // 重新绑定行checkbox事件
            var rowCheckboxes = document.querySelectorAll('.main_list_table tbody input[type="checkbox"]');
            for (var i = 0; i < rowCheckboxes.length; i++) {
                rowCheckboxes[i].addEventListener('change', checkRowCheckbox);
            }

            renderPagination();

            // 重置全选状态
            var headerCheckbox = document.querySelector('.main_list_table th input[type="checkbox"]');
            if (headerCheckbox) {
                headerCheckbox.checked = false;
            }
        }

        // 行checkbox变化事件
        function checkRowCheckbox() {
            var headerCheckbox = document.querySelector('.main_list_table th input[type="checkbox"]');
            var rowCheckboxes = document.querySelectorAll('.main_list_table tbody input[type="checkbox"]');
            var checkedCount = 0;

            for (var i = 0; i < rowCheckboxes.length; i++) {
                if (rowCheckboxes[i].checked) {
                    checkedCount++;
                }
            }

            if (headerCheckbox) {
                headerCheckbox.checked = checkedCount === rowCheckboxes.length && rowCheckboxes.length > 0;
            }
        }

        // 删除行
        function deleteRow(id) {
            if (confirm('确定要删除这条记录吗？')) {
                totalData = totalData.filter(function (item) {
                    return item.id !== id;
                });
                filteredData = filteredData.filter(function (item) {
                    return item.id !== id;
                });

                // 如果当前页没有数据了，回到上一页
                var totalPages = Math.ceil(filteredData.length / pageSize);
                if (currentPage > totalPages && totalPages > 0) {
                    currentPage = totalPages;
                }

                renderTable();
            }
        }

        // 渲染分页
        function renderPagination(pageNo, pageTotal) {
            var pager = document.getElementById('pager');
            if (!pager) return;

            // 如果没有传入参数，使用默认值
            if (typeof pageNo === 'undefined') pageNo = 1;
            if (typeof pageTotal === 'undefined') pageTotal = 1;

            var html = '';

            // 上一页
            if (pageNo > 1) {
                html += '<span class="pager_btn" onclick="goToPage(' + (pageNo - 1) + ')">&lt;</span>';
            } else {
                html += '<span class="pager_btn" style="opacity: 0.5; cursor: not-allowed;">&lt;</span>';
            }

            // 页码显示逻辑
            var startPage = Math.max(1, pageNo - 2);
            var endPage = Math.min(pageTotal, pageNo + 2);

            // 显示第一页
            if (startPage > 1) {
                html += '<span class="pager_btn" onclick="goToPage(1)">1</span>';
                if (startPage > 2) {
                    html += '<span class="pager_btn">...</span>';
                }
            }

            // 显示中间页码
            for (var i = startPage; i <= endPage; i++) {
                if (i === pageNo) {
                    html += '<span class="pager_btn" style="background: #1677FF; color: white;">' + i + '</span>';
                } else {
                    html += '<span class="pager_btn" onclick="goToPage(' + i + ')">' + i + '</span>';
                }
            }

            // 显示最后一页
            if (endPage < pageTotal) {
                if (endPage < pageTotal - 1) {
                    html += '<span class="pager_btn">...</span>';
                }
                html += '<span class="pager_btn" onclick="goToPage(' + pageTotal + ')">' + pageTotal + '</span>';
            }

            // 下一页
            if (pageNo < pageTotal) {
                html += '<span class="pager_btn" onclick="goToPage(' + (pageNo + 1) + ')">&gt;</span>';
            } else {
                html += '<span class="pager_btn" style="opacity: 0.5; cursor: not-allowed;">&gt;</span>';
            }

            // 跳转输入框
            html += '<span style="margin-right: 0;padding-right: 0;">前往</span>';
            html += '<span class="pager_input"><input type="text" value="' + pageNo + '" onkeypress="handlePageJump(event, ' + pageTotal + ')"/></span>';
            html += '<span style="margin-left: 0;padding-left: 0;">页</span>';

            pager.innerHTML = html;
        }

        // 跳转到指定页（需要在实际使用时实现具体的页面跳转逻辑）
        function goToPage(page) {
            // 这里应该调用后端接口获取指定页的数据
            // 示例：调用后端API，传入page参数
            console.log('跳转到第' + page + '页');
            // 实际项目中应该类似：
            // loadPageData(page);
        }

        // 处理页面跳转输入
        function handlePageJump(event, totalPages) {
            if (event.key === 'Enter') {
                var page = parseInt(event.target.value);
                if (page >= 1 && page <= totalPages) {
                    goToPage(page);
                } else {
                    // 恢复当前页码
                    var currentPageNo = getCurrentPageNo(); // 需要实现获取当前页码的函数
                    event.target.value = currentPageNo;
                    alert('请输入有效的页码（1-' + totalPages + '）');
                }
            }
        }

        // 获取当前页码（需要根据实际情况实现）
        function getCurrentPageNo() {
            // 这里应该返回当前的页码
            // 可以从全局变量、URL参数或其他地方获取
            return 1; // 默认返回第1页
        }

        // 使用示例：根据后端返回的数据渲染分页
        // 调用方式：renderPagination(backendData.pageNo, backendData.pageTotal);
        // 例如：
        // var backendData = {
        //     pageNo: 2,        // 当前页码
        //     pageSize: 10,     // 每页条数
        //     pageTotal: 15,    // 总页数
        //     total: 150,       // 总记录数
        //     totalPage: 15     // 总页数（与pageTotal相同）
        // };
        // renderPagination(backendData.pageNo, backendData.pageTotal);
        renderPagination(1, 100);

        // 页面加载完成后初始化
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', init);
        } else {
            init();
        }

        // 弹窗相关变量
        let businessData = [];
        let currentDialogType = '';
        let rowCounter = 0;

        // 业务类型树形数据
        const treeData = [
            {
                name: '印信服务',
                id: '432432432',
                services: [
                    {
                        name: '学校公章、法人章、党委章用印申请',
                        id: '4324324'
                    },
                    {
                        name: '事业单位法人证书、法人身份证复印件申请',
                        id: '4324324324324'
                    }
                ]
            },
            {
                name: '学籍服务',
                id: '432432433',
                services: [
                    {
                        name: '学籍注册',
                        id: '4324325'
                    },
                    {
                        name: '成绩查询',
                        id: '4324326'
                    },
                    {
                        name: '证书申请',
                        id: '4324327'
                    }
                ]
            },
            {
                name: '学务服务',
                id: '432432434',
                services: [
                    {
                        name: '转专业申请',
                        id: '4324328'
                    },
                    {
                        name: '休学申请',
                        id: '4324329'
                    },
                    {
                        name: '复学申请',
                        id: '4324330'
                    },
                    {
                        name: '退学申请',
                        id: '4324331'
                    },
                    {
                        name: '毕业申请',
                        id: '4324332'
                    }
                ]
            }
        ];

        // 打开弹窗
        function openBusinessDialog(type) {
            currentDialogType = type;
            const dialog = document.getElementById('businessDialog');
            const dialogElement = dialog.querySelector('.dialog');

            // 更新弹窗标题
            dialog.querySelector('.dialog-title').textContent = type + '业务登记';

            // 显示弹窗
            dialog.classList.add('show');
            setTimeout(() => {
                dialogElement.classList.add('show');
            }, 10);

            // 初始化表格
            updateTableDisplay();
        }

        // 关闭弹窗
        function closeDialog() {
            const dialog = document.getElementById('businessDialog');
            const dialogElement = dialog.querySelector('.dialog');

            dialogElement.classList.remove('show');
            setTimeout(() => {
                dialog.classList.remove('show');
            }, 300);
        }

        // 添加表格行
        function addTableRow() {
            rowCounter++;
            const newRow = {
                id: 'row_' + rowCounter,
                business: '',
                amount: ''
            };
            businessData.push(newRow);
            updateTableDisplay();
        }

        // 删除表格行
        function deleteTableRow(rowId) {
            businessData = businessData.filter(item => item.id !== rowId);
            updateTableDisplay();
        }

        // 创建树形下拉组件
        function createTreeSelect(rowId, selectedValue) {
            const selectId = 'tree-select-' + rowId;
            const dropdownId = 'tree-dropdown-' + rowId;

            // 创建下拉菜单并插入到body中
            setTimeout(() => {
                if (!document.getElementById(dropdownId)) {
                    const dropdown = document.createElement('div');
                    dropdown.className = 'tree-select-dropdown';
                    dropdown.id = dropdownId;
                    dropdown.style.position = 'fixed';
                    dropdown.innerHTML = '<div class="tree-select-search">' +
                        '<input type="text" placeholder="搜索业务..." oninput="filterTreeOptions(\'' + rowId + '\', this.value)">' +
                        '</div>' +
                        '<div class="tree-select-options" id="tree-options-' + rowId + '">' +
                        renderTreeOptions(rowId) +
                        '</div>';
                    document.body.appendChild(dropdown);
                }
            }, 0);

            return '<div class="tree-select" id="' + selectId + '">' +
                '<div class="tree-select-trigger" onclick="toggleTreeDropdown(\'' + rowId + '\')">' +
                '<span class="tree-select-value">' + (selectedValue || '<span class="tree-select-placeholder">请选择业务类型</span>') + '</span>' +
                '<div class="tree-select-arrow"></div>' +
                '</div>' +
                '</div>';
        }

        // 渲染树形选项
        function renderTreeOptions(rowId, searchText = '') {
            let html = '';

            treeData.forEach(category => {
                const filteredServices = category.services.filter(service =>
                    !searchText || service.name.toLowerCase().includes(searchText.toLowerCase())
                );

                if (!searchText || filteredServices.length > 0) {
                    // 一级分类（不可选）
                    html += '<div class="tree-select-option tree-select-option-level-0 disabled">';
                    html += '<div class="tree-select-option-indent"></div>';
                    html += '<div class="tree-select-option-content">' + category.name + '</div>';
                    html += '</div>';

                    // 二级服务（可选）
                    filteredServices.forEach(service => {
                        html += '<div class="tree-select-option tree-select-option-level-1" onclick="selectTreeOption(\'' + rowId + '\', \'' + service.id + '\', \'' + service.name + '\')">';
                        html += '<div class="tree-select-option-indent"></div>';
                        html += '<div class="tree-select-option-content">' + service.name + '</div>';
                        html += '</div>';
                    });
                }
            });

            return html || '<div class="tree-select-empty">暂无匹配的业务类型</div>';
        }

        // 切换下拉框显示
        function toggleTreeDropdown(rowId) {
            const dropdown = document.getElementById('tree-dropdown-' + rowId);
            const trigger = document.querySelector(`#tree-select-${rowId} .tree-select-trigger`);
            const isVisible = dropdown && dropdown.classList.contains('show');

            // 关闭所有其他下拉框
            document.querySelectorAll('.tree-select-dropdown').forEach(d => {
                d.classList.remove('show');
            });
            document.querySelectorAll('.tree-select-trigger').forEach(t => {
                t.classList.remove('active');
            });

            // 切换当前下拉框
            if (!isVisible && dropdown) {
                // 计算触发器位置 - 显示在触发器正下方并紧挨着
                const triggerRect = trigger.getBoundingClientRect();
                dropdown.style.top = triggerRect.bottom + 'px';
                dropdown.style.left = triggerRect.left + 'px';
                dropdown.style.width = triggerRect.width + 'px';

                dropdown.classList.add('show');
                trigger.classList.add('active');
            }
        }

        // 选择树形选项
        function selectTreeOption(rowId, serviceId, serviceName) {
            const selectContainer = document.getElementById('tree-select-' + rowId);
            const textElement = selectContainer.querySelector('.tree-select-value');
            const dropdown = document.getElementById('tree-dropdown-' + rowId);
            const trigger = selectContainer.querySelector('.tree-select-trigger');

            textElement.textContent = serviceName;
            if (dropdown) {
                dropdown.classList.remove('show');
            }
            if (trigger) {
                trigger.classList.remove('active');
            }

            // 更新业务数据
            updateBusinessData(rowId, 'business', serviceName);
            updateBusinessData(rowId, 'businessId', serviceId);
        }

        // 过滤树形选项
        function filterTreeOptions(rowId, searchText) {
            const optionsContainer = document.getElementById('tree-options-' + rowId);
            optionsContainer.innerHTML = renderTreeOptions(rowId, searchText);
        }

        // 点击外部关闭下拉框
        document.addEventListener('click', function (e) {
            if (!e.target.closest('.tree-select') && !e.target.closest('.tree-select-dropdown')) {
                document.querySelectorAll('.tree-select-dropdown').forEach(d => {
                    d.classList.remove('show');
                });
                document.querySelectorAll('.tree-select-trigger').forEach(t => {
                    t.classList.remove('active');
                });
            }
        });

        // 阻止搜索框点击事件冒泡
        document.addEventListener('click', function (e) {
            if (e.target.closest('.tree-select-search input')) {
                e.stopPropagation();
            }
        });

        // 更新表格显示
        function updateTableDisplay() {
            const tbody = document.getElementById('businessTableBody');
            const emptyState = document.getElementById('emptyState');

            if (businessData.length === 0) {
                tbody.innerHTML = '';
                emptyState.style.display = 'block';
            } else {
                emptyState.style.display = 'none';
                tbody.innerHTML = businessData.map(function (row) {
                    return '<tr>' +
                        '<td>' +
                        createTreeSelect(row.id, row.business) +
                        '</td>' +
                        '<td>' +
                        '<input type="number" class="table-input" placeholder="请输入办理量" ' +
                        'value="' + row.amount + '" min="1" ' +
                        'onchange="updateBusinessData(\'' + row.id + '\', \'amount\', this.value)">' +
                        '</td>' +
                        '<td>' +
                        '<button class="delete-btn" onclick="deleteTableRow(\'' + row.id + '\')">' + '删除' + '</button>' +
                        '</td>' +
                        '</tr>';
                }).join('');
            }
        }

        // 更新业务数据
        function updateBusinessData(rowId, field, value) {
            const row = businessData.find(item => item.id === rowId);
            if (row) {
                row[field] = value;
            }
        }

        // 取消按钮
        function cancelDialog() {
            // 清空数据
            businessData = [];
            rowCounter = 0;
            currentDialogType = '';

            // 关闭弹窗
            closeDialog();
        }

        // 确定按钮
        function confirmDialog() {
            // 第一重校验：检查是否有数据
            if (businessData.length === 0) {
                alert('请至少添加一条业务数据！');
                return;
            }

            // 第二重校验：检查每行数据是否完整
            for (let i = 0; i < businessData.length; i++) {
                const row = businessData[i];
                if (!row.business || !row.amount) {
                    alert('第' + (i + 1) + '行数据不完整，请检查业务类型和办理量是否都已填写！');
                    return;
                }
                if (parseInt(row.amount) <= 0) {
                    alert('第' + (i + 1) + '行的办理量必须大于0！');
                    return;
                }
            }

            // 校验通过，处理业务逻辑
            console.log('提交数据：', {
                type: currentDialogType,
                data: businessData
            });

            alert(currentDialogType + '业务登记成功！');

            // 清空数据并关闭弹窗
            cancelDialog();
        }

        // 点击遮罩层关闭弹窗
        document.addEventListener('click', function (e) {
            if (e.target.classList.contains('dialog-overlay')) {
                closeDialog();
            }
        });
    </script>
</body>

</html>